<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{firstName + ' ' + secondName}}</h1>
		<h2>{{fullName2 + ' ' + age}}</h2>
		<h3>{{fullName1()}}</h3>
		<h4>{{firstName + ' ' + secondName}}</h4>
	</div>

	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				firstName: 'Dell',
				secondName: 'Lee',
				fullName: '',
				age: 18
			},
			watch: {
				firstName: function () {
					console.log('wathch firstName');
					this.fullName = this.firstName + ' ' + this.secondName;
				},
				secondName: function () {
					console.log('wathch secondName');
					this.fullName = this.firstName + ' ' + this.secondName;
				}
			},
			methods: {
				fullName1: function () {
					console.log('methods');
					return this.firstName + ' ' + this.secondName;
				}
			},
			computed: {
				fullName2: function () {
					console.log('computed');
					return this.firstName + ' ' + this.secondName;
				}
			}
		})
	</script>
</body>
</html>